<template>
  <div>
    <a-drawer
      title="用户配置"
      placement="right"
      :closable="false"
      :visible="visible"
      :after-visible-change="afterVisibleChange"
      @close="onClose"
      width="60%"
    >

      <a-card :bordered="false">
<!--        <div style="text-align: right;">-->
<!--          <a-icon type="close-circle" @click="hideUserList" />-->
<!--        </div>-->
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="24">

              <a-col :md="12" :sm="12">
                <a-form-item label="">
                  <a-input placeholder="用户账号模糊查询" v-model="queryParam2.userName"></a-input>
                </a-form-item>
              </a-col>
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="9" :sm="24">
             <a-button type="primary" @click="searchQuery2" icon="search" style="margin-left: 21px">查询</a-button>
              <a-button type="primary" @click="searchReset2" icon="reload" style="margin-left: 8px">重置</a-button>

            </a-col>
          </span>
            </a-row>
          </a-form>
        </div>
        <!-- 操作按钮区域 -->
        <div class="table-operator" :md="24" :sm="24">
          <!--<a-button @click="handleAdd2" type="primary" style="margin-top: 16px">新增用户</a-button>-->
          <!--<a-button @click="handleEdit2" type="primary" icon="edit" style="margin-top: 16px">用户编辑</a-button>-->
          <a-button @click="handleAddUserRole" type="primary" style="margin:0 0 8px 0">关联用户</a-button>

          <!--<a-dropdown v-if="selectedRowKeys2.length > 0">-->
          <!--<a-menu slot="overlay">-->
          <!--<a-menu-item key="1" @click="batchDel2">-->
          <!--<a-icon type="delete"/>-->
          <!--删除-->
          <!--</a-menu-item>-->
          <!--</a-menu>-->
          <!--<a-button style="margin-left: 8px"> 批量操作-->
          <!--<a-icon type="down"/>-->
          <!--</a-button>-->
          <!--</a-dropdown>-->
        </div>
        <!-- table区域-begin -->
        <div>
<!--          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
<!--            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{-->
<!--              selectedRowKeys2.length }}</a>项-->
<!--            <a style="margin-left: 24px" @click="onClearSelected2">清空</a>-->
<!--          </div>-->
          <a-table
            style="height:500px"
            ref="table2"
            bordered
            size="middle"
            rowKey="id"
            :columns="columns2"
            :dataSource="dataSource2"
            :pagination="ipagination2"
            :loading="loading2"
            :customRow="onClickRow"
            :rowSelection="{selectedRowKeys: selectedRowKeys2, onChange: onSelectChange2,columnWidth:15}"
            @change="handleTableChange2">
            <span slot="action" slot-scope="text, record">
           <!--<a @click="handleEdit2(record)">编辑</a>-->
              <!--<a-divider type="vertical"/>-->
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多 <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete2(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
          </a-table>
        </div>
        <!-- 表单区域 -->
        <user-modal ref="modalForm2" @ok="modalFormOk2"></user-modal>
        <SelectUserModal ref="selectUserModal" @selectFinished="selectOK"></SelectUserModal>
      </a-card>
      <div
        :style="{
          position: 'absolute',
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e8e8e8',
          padding: '10px 16px',
          textAlign: 'right',
          left: 0,
          background: '#fff',
          borderRadius: '0 0 4px 4px',
        }"
      >
        <a-button style="marginRight: 8px" @click="onClose">
          取消
        </a-button>
        <a-button type="primary" @click="onClose">
          确认
        </a-button>
      </div>
    </a-drawer>
  </div>
</template>
<script>
import { filterObj } from '@/utils/util'
import { getAction, postAction } from '@api/manage'
import SelectUserModal from '@page-modules/SelectUserModal'
import UserModal from '@page-modules/UserModal'

export default {
  name: 'userContact',
  data() {
    return {
      visible: false,
      selectedRowKeys1: [],
      queryParam2: {},
      currentRoleId: '',
      columns2: [{
        title: '用户账号',
        align: 'center',
        dataIndex: 'userName',
        width: 120
      },
        {
          title: '用户名称',
          align: 'center',
          width: 100,
          dataIndex: 'realName'
        },
        {
          title: '状态',
          align: 'center',
          width: 80,
          dataIndex: 'status_dictText'
        },

        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 120
        }],
      dataSource2: [],
      selectionRows2:[],
      ipagination2: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      loading2: false,
      selectedRowKeys2: [],
      url: {
        list2: window._CONFIG['domianURL'] + '/customerExtendController/findUserList',
        delete2: window._CONFIG['domianURL'] + '/customerExtendController/deleteById',
        addUserRole: window._CONFIG['domianURL'] + '/customerExtendController/saveExtendUser',
      }
    }
  },
  components: {
    SelectUserModal,
    UserModal
  },
  methods: {
    onClickRow(record) {
      return {
        on: {
          click: () => {
            let keys = this.selectedRowKeys2
            if (keys.indexOf(record.id) == -1) {
              keys.push(record.id)
              this.selectionRows2.push(record)
            } else {
              keys.remove(record.id)
              this.selectionRows2.remove(record)
            }
            this.selectedRowKeys2 = keys

          }
        }
      }
    },
    onClearSelected2() {
      this.selectedRowKeys2 = []
      this.selectionRows2 = []
    },
    getQueryField2() {
      //TODO 字段权限控制
      var str = 'id,'
      this.columns2.forEach(function(value) {
        str += ',' + value.dataIndex
      })
      return str
    },
    selectOK(data) {
      let params = {}
      params.custCode = this.currentRoleId
      params.userNameList = []
      for (let a = 0; a < data.length; a++) {
        params.userNameList.push(data[a])
      }
      var that = this
      postAction(this.url.addUserRole, params).then((res) => {
        if (res.success) {
          that.loadData2()
          that.$message.success(res.message)
        } else {
          that.$message.warning(res.message)
        }
        that.userNameList = []
      })
    },
    modalFormOk2() {
      // 新增/修改 成功时，重载列表
      this.loadData2()
    },
    handleDelete2: function(id) {
      if (!this.url.delete2) {
        this.$message.error('请设置url.delete2属性!')
        return
      }
      var that = this
      getAction(that.url.delete2, { id: id }).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.loadData2()
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    handleTableChange2(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter2.column = sorter.field
        this.isorter2.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      }
      this.ipagination2 = pagination
      this.loadData2()
    },
    onSelectChange2(selectedRowKeys, selectionRows) {
      this.selectedRowKeys2 = selectedRowKeys
      this.selectionRows2 = selectionRows
    },
    handleAddUserRole() {
      if (this.currentRoleId == '') {
        this.$message.error('请选择一个角色!')
      } else {
        this.$refs.selectUserModal.isfilterRole = 1
        this.$refs.selectUserModal.visible = true
        this.$refs.selectUserModal.custCode = this.currentRoleId
      }
    },
    loadData2(arg) {
      if (!this.url.list2) {
        this.$message.error('请设置url.list2属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination2.current = 1
      }
      if (this.currentRoleId === '') return
      let params = this.getQueryParams2()//查询条件
      params.custCode = this.currentRoleId
      this.loading2 = true
      var that = this
      postAction(this.url.list2, params).then((res) => {
        if (res.success) {
          that.dataSource2 = res.result.records
          that.ipagination2.total = res.result.total

        }
        that.loading2 = false
      })

    },
    searchQuery2() {
      this.loadData2(1)
    },
    searchReset2() {
      this.queryParam2 = {}
      this.loadData2(1)
    },
    getQueryParams2() {
      //获取查询条件
      let sqp = {}
      if (this.superQueryParams2) {
        sqp['superQueryParams'] = encodeURI(this.superQueryParams2)
        sqp['superQueryMatchType'] = this.superQueryMatchType2
      }
      var param = Object.assign(sqp, this.queryParam2, this.isorter2, this.filters2)
      param.field = this.getQueryField2()
      param.current = this.ipagination2.current
      param.size = this.ipagination2.pageSize
      return filterObj(param)
    },
    hideUserList() {
      //this.rightcolval = 0
      this.selectedRowKeys1 = []
    },
    // ==============================
    afterVisibleChange(val) {
      console.log('visible', val)
    },
    showDrawer(cord) {
      this.visible = true
      this.currentRoleId = cord.custCode
      this.loadData2()
    },
    onClose() {
      this.visible = false
    }
  }
}
</script>